<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none;
        }
        .b1{
            position: fixed;
            top: 0;
            bottom: 0;
            right: 0;
            left: 0;
            background-color: black;
            opacity: 0.5;
            z-index: 9;
        }
        .b2{
            position: fixed;
            width: 500px;
            height: 400px;
            background-color: white;
            top:50%;
            left: 50%;
            margin-top: -200px;
            margin-left: -200px;
            z-index: 10;
        }
    </style>
</head>
<body>
<div>
    <input id="p1" type="button" value="添加">
</div>
<div>
    <table id="tb1" border="1" style="margin-top: 10px">
        <tr>
            <td target="hostname">1.1.1.1</td>
            <td target="port">80</td>
            <td><a class="edit">编辑</a> |  <span class="del">删除</span></td>
        </tr>
        <tr>
            <td target="hostname">1.1.1.2</td>
            <td target="port">80</td>
            <td><a class="edit">编辑</a> |  <span class="del">删除</span></td>
        </tr>
        <tr>
            <td target="hostname">1.1.1.3</td>
            <td target="port">80</td>
            <td><a class="edit">编辑</a> |  <span class="del">删除</span></td>
        </tr>
    </table>
</div>
<div class="b1 hide"></div>
<div class="b2 hide">
    ip:<input name="hostname" type="text">
    端口:<input name="port" type="text">
    <input id="qx" type="button" value="取消">
    <input id="qd" type="button" value="确定">
</div>
<script src="jquery-1.12.4.js"></script>
<script>
    //删除
      $('table').delegate('.del','click',function () {
          $(this).parent().parent().remove()
      });


    $('#p1').click(function () {
        $('.b1,.b2').removeClass('hide');
        $('.b2 input[name="hostname"]').val("");
        $('.b2 input[name="port"]').val("")
    });

    $('#qx').click(function () {
        $('.b1,.b2').addClass('hide')
    });

    //$('.edit').click(function () {
    $('table').delegate('.edit','click',function () {
        console.log(this);
        $('.b1,.b2').removeClass('hide');
        var tt=$(this).parent().prevAll();
        //console.log(tt[0])
        //方法一
//        var port=$(tt[0]).text();
//        var host=$(tt[1]).text();
//        console.log(port,host);
//        $('.b2 input[name="hostname"]').val(host);
//        $('.b2 input[name="port"]').val(port)；

        //方法二
        tt.each(function () {
            //获取td的target属性值
            var n =$(this).attr('target');
            //获取td中的内容
            var text=$(this).text();
            //进行字符串拼接'.b2 input[name]="n"' ,需要将n值传进去
            var a1='.b2 input[name="';
            var a2='"]';
            var temp =a1 + n +a2;
            $(temp).val(text)
        })
    });

    $('#qd').click(function () {
        $('.b1,.b2').addClass('hide');
            var host=$('.b2 input[name="hostname"]').val();
            var port=$('.b2 input[name="port"]').val();
            var tr1 =document.createElement('tr');
            tr1.innerHTML="<td target=\"hostname\">"+ host +"</td>" +
                "<td target=\"port\">"+ port+"</td>" +
                "<td><a class=\"edit\">编辑</a> |  <span class=\"del\">删除</span></td>";
            console.log(tr1);
            $('#tb1').append(tr1)

    });
</script>
</body>
</html>